<template>
    <div style="display:inline-block;">
      <el-popover v-model="visible" placement="bottom" width="450" trigger="click">
        <el-container>
      
          <el-row style="">
            <el-col :span="8">
              <el-select v-model="type" placeholder="请选择类型" style="width:130px;" @change="typeChange">
                <el-option label="其他" value="时分秒"></el-option>
                <el-option label="按天" value="每天"></el-option>
                <el-option label="按周" value="每周"></el-option>
                <el-option label="按月" value="每月"></el-option>
              </el-select>
            </el-col>
            <el-col style="" :span="8">
              <el-select
                v-show="type == '每周'"
                v-model="week"
                value-key="cron"
                placeholder="请选择星期"
                style="width:112px;"
              >
                <el-option
                  v-for="item in weekOption"
                  :key="item.cron"
                  :label="item.title"
                  :value="item"
                ></el-option>
              </el-select>
            </el-col>
            <el-col :span="8">
              <el-select
                v-show="type == '每月'"
                v-model="month"
                value-key="cron"
                placeholder="请选择日期"
                style="width:112px;"
              >
                <el-option
                  v-for="item in monthOption"
                  :key="item.cron"
                  :label="item.title"
                  :value="item"
                ></el-option>
              </el-select>
            </el-col>
            <el-col style="" v-show="type == '每月' || type == '每周' || type == '每天'" :span="8">
              <el-time-picker
                placeholder="选择时间"
                v-model="time"
                value-format="H:m:s"
                style="width: 100%;"
              ></el-time-picker>
            </el-col>
            <el-col style="line-height: 36px;" v-show="type == '时分秒'" :span="18">
              <label>每隔 </label>
              <el-input-number size="mini" v-model="hour" :min="0" :max="23"></el-input-number>
              <label> 小时,</label>  </el-col>
              <el-col style="line-height: 36px;" v-model="minute" v-show="type == '时分秒'" :span="24">
                <label>每隔 </label><el-input-number  v-model="minute" size="mini" :min="0" :max="59"></el-input-number>
              <label> 分钟,</label>
              <label>每隔 </label><el-input-number v-model="second" size="mini" :min="0" :max="59"></el-input-number>
              <label> 秒,</label></el-col>
          </el-row>
         
        </el-container>
        <div style="margin-top: 5%;text-align: center;">
            <el-button size="mini" type="text" @click="visible = false">取消</el-button>
            <el-button type="primary" size="mini" @click="handleSummit">确定</el-button>
        </div>
        <el-input v-model="value" slot="reference"></el-input>
      </el-popover>
    </div>
  </template>
  <script>
  export default {
    name: "easyCron",
    props: {
      timeCronStr: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        hour:0,
        minute:0,
        second:0,
        visible: false,
        value: '',
        type: '', // 天\周\月
        week: null, // 星期几
        month: null, // 几号
        time: '', // 时间
        weekOption: [
          {
            title: '星期一',
            value: '星期一',
            cron: 2,
          },
          {
            title: '星期二',
            value: '星期二',
            cron: 3,
          },
          {
            title: '星期三',
            value: '星期三',
            cron: 4,
          },
          {
            title: '星期四',
            value: '星期四',
            cron: 5,
          },
          {
            title: '星期五',
            value: '星期五',
            cron: 6,
          },
          {
            title: '星期六',
            value: '星期六',
            cron: 7,
          },
          {
            title: '星期日',
            value: '星期日',
            cron: 1,
          },
        ],
        monthOption: [],
      }
    },
    created() {
      this.initData()
    },
    mounted() {},
    methods: {
      initData() {
        let arr = []
        for (let i = 1; i < 32; i++) {
          arr.push({
            title: i + '号',
            value: i + '号',
            cron: i,
          })
        }
        this.monthOption = arr
        if (this.timeCronStr) {
          this.value = this.timeCronStr
          let valueArr = this.timeCronStr.split(',')
          let valueArrLen = valueArr.length
          this.type = valueArr[0]
          this.time = valueArr[valueArrLen - 1]
          if (valueArrLen > 2) {
            // 说明是每月 或 每周
            if (valueArr[1].indexOf('星期') > -1) {
              // 每周
              this.weekOption.map((v) => {
                if (v.title == valueArr[1]) {
                  this.week = v
                }
              })
            } else {
              this.monthOption.map((v) => {
                if (v.title == valueArr[1]) {
                  this.month = v
                }
              })
            }
          }
        }
      },
      typeChange(t) {
        if (t == '每周' && !this.week) {
          this.week = this.weekOption[0]
        }
        if (t == '每月' && !this.month) {
          this.month = this.monthOption[0]
        }
      },
      handleSummit() {
        if(this.hour!=0 || this.minute!=0 || this.second!=0){
            if(!this.time){
              this.time = this.hour+":"+this.minute+":"+this.second;
            }
        }else if (!this.time) {
          this.$message({
            message: '请选择时间!',
            type: 'warning',
          })
          return
        }
        // console.log("123")
        // console.log(this.time=="")
        let dataArr = []
        let timeCron
        let clockCornArr = this.time.split(':').reverse()
        if (this.type == '每天') {
          dataArr.push(this.type, this.time)
          timeCron = clockCornArr.join(' ') + ' * * ?'
        } else {
          if (this.type == '每月') {
            dataArr.push(this.type, this.month.title, this.time)
            timeCron = clockCornArr.join(' ') + ' ' + this.month.cron + ' * ?'
          } else if(this.type == '每周'){
            // 每周
            dataArr.push(this.type, this.week.title, this.time)
            timeCron = clockCornArr.join(' ') + ' ? * ' + this.week.cron
          }else{
            //时分秒
            console.log("时分秒")
            console.log(this.hour+":"+this.minute+":"+this.second)
            var h = this.hour;
            var m = this.minute;
            var s= this.second;
            if(this.hour == 0){
              h = "*";
            }else{
              h = "0/"+h
            }
      

            if(this.minute == 0 && this.hour == 0){
              m = "*";
            }else if(this.minute==0 && this.hour!=0){
              m = 0
            }
            else {
              m = "0/"+m
            }
            if(s== 0){
              s = 0;
            }else if(this.second!=0 && this.minute==0){
              s = "0/"+s
            }
            timeCron = s+" "+m+" "+h+" "+"* * ?";
          }
        }
        this.value = dataArr.join(',')
        if(this.type == '时分秒'){
          this.value ="每隔"+this.hour+"时"+this.minute+"分"+this.second+"秒";
        }
        console.log('timeCron', timeCron)
        this.visible = false
        this.$emit('change', this.value, timeCron) // 每月,1号,14:52:36 和 36 52 14 1 * ?
      },
    },
  }
  </script>
  <style lang="scss" scoped>
  .form {
    padding: 12px;
  }
  .footer {
    text-align: center;
    margin-top: 10px;
  }
  </style>
  